<template>
  <div class="cq-firstmodel" v-if="visible">
    <div class="marsk">
      <div class="wrap">
        <div class="body">
          <slot name="alert">
            <!-- 具名插槽不论你的html结构是什么样的都会插在你的slot并且有name的位置处 -->
            <!-- slot默认的结构,如果不写这个的话，index如果没有值的话,页面就会什么都没有 -->
            <div class="alert">警告</div>
          </slot>
          <slot name="text">
            <!-- slot默认的结构,如果不写这个的话，index如果没有值的话,页面就会什么都没有 -->
            <div class="text">你真的要离开我吗？</div>
          </slot>
          <!-- <slot name="body">
              <div class="alert">警告</div>
              <div class="text">你真的要离开我吗？</div>
          </slot> -->
        </div>
        <slot name="button">
          <div class="btn">
            <button class="modal__button--confirm" @click="$emit('on-confirm')">
              确定
            </button>
            <button class="modal__button--cancel" @click="$emit('on-cancel')">
              取消
            </button>
          </div>
          <slot>
            <h1>111</h1>
          </slot>
        </slot>
      </div>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
/* 别忘了为了包裹所有的组件，外面还套了一个div,这个div也要记得设置类名，然后高度设置为100% ,才能设置marsk高度为屏幕高度*/
.aaa {
  height: 100%;
}
.cq-firstmodel {
  height: 100%;
}
.wrap {
  width: 350px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
}
.marsk {
  /* 这个固定定位是为了让mask脱离文档流 */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  display: flex;
}
.modal__button--confirm {
  margin: 0 5px;
  outline: none;
  border: 0;
  width: 150px;
  height: 30px;
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.modal__button--cancel {
  outline: none;
  border: 0;
  width: 150px;
  height: 30px;
  background: linear-gradient(90deg, #fb7d15, hsl(332, 100%, 50%));
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.body {
  text-align: center;
}
.wrap div {
  margin: 15px 0;
}
</style>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
};
</script>
